<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css?v=20200718' rel='stylesheet' />
<link href='../fullcalendar.print.min.css?v=20200718' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js?v=20200718'></script>
<script src='../lib/jquery.min.js?v=20200718'></script>
<script src='../fullcalendar.min.js?v=20200718'></script>
<script src='../gcal.min.js?v=20200718'></script>
<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listYear'
      },
      displayEventTime: false, // don't show the time column in list view
      // THIS KEY WON'T WORK IN PRODUCTION!!!
      // To make your own Google API key, follow the directions here:
      // http://fullcalendar.io/docs/google_calendar/
      googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
      // US Holidays
      events: 'en.usa#holiday@group.v.calendar.google.com',
      eventClick: function(event) {
        // opens events in a popup window
        window.open(event.url, 'gcalevent', 'width=700,height=600');
        return false;
      },
      loading: function(bool) {
        $('#loading').toggle(bool);
      }
    });
  });
</script>
<style>body{margin:40px 10px;padding:0;font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif;font-size:14px;}#loading{display:none;position:absolute;top:10px;right:10px;}#calendar{max-width:900px;margin:0 auto;}</style>
</head>
<body>
  <div id='loading'>loading...</div>
  <div id='calendar'></div>
</body>
</html>